<template>
  <div class="app-container documentation-container">
    <StatisticsCard
      :list="dataCountList"
      :loading="dataInfoLoading"
    />

    <div class="search-box">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select v-model="form.status" clearable placeholder="请选择">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item v-if="activeName === '1'" label="是否同意入职">
          <el-select v-model="form.isEntry" clearable placeholder="请选择">
            <el-option
              v-for="item in isEntry"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="padding: 10px 20px 20px 20px; border-radius: 4px; background-color:#fff; margin-top: 20px;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="面试审核" name="1">
          <el-table v-loading="loading" :data="interviewableData" border style="width: 100%">
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <span>{{ handleMsg(scope.row.trend,'name','value') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0" type="warning">待审核</el-tag>
                <el-tag v-if="scope.row.status == 1" type="success">审核成功</el-tag>
                <el-tag v-if="scope.row.status == 2" type="danger">审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否同意入职">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_entry == 0" type="danger">拒绝入职</el-tag>
                <el-tag v-else-if="scope.row.is_entry == 1" type="success">同意入职</el-tag>
                <el-tag v-else type="warning">待确认</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="提交时间" prop="created_at" />
            <el-table-column label="应聘部门">
              <template slot-scope="scope">
                <span>{{ handleMsg(scope.row.trend,'applied_department','valueable')?.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应聘岗位">
              <template slot-scope="scope">
                <span>{{ handleMsg(scope.row.trend,'applied_position','valueable')?.name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handlerShow(scope.row)">
                  <i class="el-icon-view" /> 查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="入职审核" name="2">
          <el-table v-loading="loading" :data="entryTableData" border style="width: 100%">
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <span>{{ handleMsg(scope.row.trend,'name','value') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="毕业院校">
              <template slot-scope="scope">
                <span>{{ handleMsg(scope.row.trend,'school_id','valueable')?.school_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="邮箱">
              <template slot-scope="scope">
                <span>{{ handleMsg(scope.row.trend,'email','value') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提交时间" prop="created_at" />
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 'waiting'" type="warning">待审核</el-tag>
                <el-tag v-if="scope.row.status == 'sign'" type="info">待签署</el-tag>
                <el-tag v-if="scope.row.status == 'success'" type="success">审核成功</el-tag>
                <el-tag v-if="scope.row.status == 'fail'" type="danger">审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handlerShow(scope.row)">
                  <i class="el-icon-view" /> 查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div style="display: flex; justify-content: end;">
        <Pagination
          v-if="meta.total"
          style="padding-bottom: 0;margin-top: 0;"
          layout="total, prev, pager, next, jumper"
          :total="meta.total"
          :page="form.page"
          :limit="form.paginate"
          @pagination="pagination"
        />
      </div>

    </div>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getEntryList, getInterviewList, entryOrInterviewData } from '@/api/v2/entry'
import dayjs from 'dayjs'
import { handleFiledByID } from '@/utils/handleData'
import StatisticsCard from '@/components/StatisticsCard/StatisticsCard.vue'
export default {
  name: 'Documentation',
  components: { StatisticsCard, Pagination },
  data() {
    return {
      // form: {},
      entryTableData: [],
      interviewableData: [],
      activeName: '1',
      form: {
        status: null,
        name: '',
        isEntry: null,
        page: 1,
        paginate: 10
      },
      meta: {},
      loading: false,
      options: [
        {
          value: '0',
          label: '等待审核'
        },
        {
          value: '1',
          label: '审核成功'
        },
        {
          value: '2',
          label: '审核失败'
        }
      ],
      options2: [
        {
          value: 'waiting',
          label: '等待审核'
        },
        {
          value: 'success',
          label: '审核成功'
        },
        {
          value: 'fail',
          label: '审核失败'
        }, {
          value: 'sign',
          label: '待签署'
        }
      ],
      pageData: {
        page: 1,
        paginate: 10
      },
      isEntry: [
        {
          value: 1,
          label: '同意入职'
        },
        {
          value: 3,
          label: '待确认'
        },
        {
          value: 0,
          label: '拒绝入职'
        }
      ],
      dataInfo: {},
      dataInfoLoading: false
    }
  },
  computed: {
    dataCountList() {
      const { entry, entryCount, interview, interviewCount, interviewSuccess } = this.dataInfo
      return [
        {
          label: '面试人数',
          value: interview,
          icon: 'interview-count-new',
          unit: '人'
        },
        {
          label: '面试待审核',
          value: interviewCount,
          icon: 'to-be-reviewed-new',
          unit: '人'
        },
        {
          label: '通过面试',
          value: interviewSuccess,
          icon: 'interview-pass',
          unit: '人'
        },
        {
          label: '入职人数',
          value: entry,
          icon: 'entry-count-new',
          unit: '人'
        },
        {
          label: '入职待审核',
          value: entryCount,
          icon: 'entry-approval-new',
          unit: '人'
        }

      ]
    },

    selectOptions() {
      if (this.activeName === '1') {
        return this.options
      } else {
        return this.options2
      }
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    // this.getEntryLists();
    this.init()
  },
  methods: {
    init() {
      Promise.allSettled([
        this.getInterviewLists(),
        this.getEntryOrInterviewData()
      ])
    },
    async getEntryOrInterviewData() {
      this.dataInfoLoading = true
      try {
        const res = await entryOrInterviewData()
        this.dataInfo = res.data
        console.log('res ------>', res)
      } catch (error) {
        console.log('error ------>', error)
      } finally {
        this.dataInfoLoading = false
      }
    },
    getdate(time) {
      if (time) {
        return dayjs(time).format('YYYY-MM-DD')
      }
    },
    async getEntryLists() {
      this.loading = true
      const res = await getEntryList(this.form)
      console.log(res)
      this.entryTableData = res.data
      this.meta = res.meta
      this.loading = false
    },
    async getInterviewLists() {
      this.loading = true
      const res = await getInterviewList(
        this.form
      )
      console.log(this.form, 'res')
      console.log(this.pageData, 'res')
      this.interviewableData = res.data
      this.meta = res.meta
      this.loading = false
    },
    pagination(page) {
      this.form.page = page.page
      this.form.paginate = page.limit
      if (this.activeName == 1) {
        this.getInterviewLists()
      } else {
        this.getEntryLists()
      }
    },
    onSubmit() {
      this.pageData.page = 1
      this.getInterviewLists()
    },
    onSubmit2() {
      this.pageData.page = 1
      this.getEntryLists()
    },
    handlerShow(data) {
      if (this.activeName == '1') {
        this.$router.push({
          path: `/entry/show/${data.id}`,
          query: { tag_title: handleFiledByID(data.trend, 'value', 'name') + '-面试详情' }
        })
      } else {
        this.$router.push({
          path: `/entry/finish/show/${data.id}`,
          query: { tag_title: handleFiledByID(data.trend, 'value', 'name') + '-入职详情' }
        })
      }
    },
    handleClick(type, e) {
      console.log(type, e)
      this.form = this.$options.data().form
      switch (this.activeName) {
        case '1':
          this.getInterviewLists()
          break
        case '2':
          this.getEntryLists()
          break
      }
    },
    handleMsg(arr, field, type) {
      if (Array.isArray(arr) && arr.length > 0) {
        const item = arr.find(item => item.field?.field === field)
        if (item && item[type]) {
          return item[type]
        } else {
          return ''
        }
      } else {
        console.log(`${arr} is not Array`)
      }
    },

    handleSearch() {
      if (this.activeName === '1') {
        this.onSubmit()
      } else {
        this.onSubmit2()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  padding: 0 20px 20px 20px;
  .demo-form-inline{
    margin-top: 5px;
  }
  .document-btn {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    padding: 0 16px;
    margin: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }

  .search-box {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
  }
}

.el-form-item {
  margin-bottom: 0;
}

::v-deep(.el-form-item__label) {
  font-size: 14px;
  color: #606266;
  font-weight: 400;
}

::v-deep(.el-form--inline) {
  .el-form-item {
    margin-right: 20px;
  }
}

</style>
